<template>
  <div
    :class="[
      'section_con1',
      pageType !== 'sum' ? 'mini_section_con1' : '',
      detailsItem.assessmentStatus === '3' ? 'mini_section_con3' : '',
    ]"
    ref="sectionCon">
    <!-- 判断是否是空数据 -->
    <template v-if="detailsItem.assessmentTitle">
      <div class="down_header" v-if="!pageType" ref="downHeader">
        <p class="title">民主测评结果计票单</p>
        <p class="sub_title">（{{ detailsItem.assessmentSecondTitle }}{{ type == 2 ? '非领导' : '非公务员' }}成员）</p>
        <div class="sub_title1">
          {{ detailsItem.createByOrgName }}单位：{{ detailsItem.startTime }} ~
          {{ detailsItem.endTime }} 召开民主测评会，应到{{ detailsItem.sumPerson }}人次，实到{{
            detailsItem.actuallyPerson
          }}人次。
        </div>
        <div class="search_line">
          <el-radio-group v-model="type" @change="onTypeChange" v-if="typeOptions.length > 1">
            <el-radio v-for="item in typeOptions" :key="item.id" :label="item.id" :value="item.id">
              {{ item.name }}
            </el-radio>
          </el-radio-group>
          <el-button class="btnBorder" size="mini" type="primary" @click="onExport">导出</el-button>
        </div>
      </div>
      <div class="down_header" v-if="pageType == 'sum'" ref="downHeader">
        <p class="title">民主测评结果计票单（{{ detailsItem.assessmentSecondTitle }}）</p>
        <div class="sub_title1">
          {{ detailsItem.createByOrgName }}单位：{{ detailsItem.startTime }} ~
          {{ detailsItem.endTime }} 召开民主测评会，应到{{ detailsItem.sumPerson }}人次，实到{{
            detailsItem.actuallyPerson
          }}人次。
          <!-- xxx单位：2021年11月24日（8：00---9：00）召开民主测评会，应到35人，实到33人。 -->
        </div>
        <div class="search_line">
          <el-radio-group v-model="type" @change="onTypeChange1" v-if="typeOptions1.length > 1">
            <el-radio v-for="item in typeOptions1" :key="item.id" :label="item.id" :value="item.id">
              {{ item.name }}
            </el-radio>
          </el-radio-group>
          <el-button class="btnBorder" size="mini" type="primary" @click="onExport1">导出</el-button>
        </div>
        <div class="search_line" style="color: #d9001b">
          测评得分=(“好”个数×1 + “较好”个数×0.8+“一般”个数×0.6)×100÷投票数
        </div>
      </div>
      <div class="down_body">
        <vxe-table
          class="mytable-scrollbar"
          border
          stripe
          height="100%"
          row-id="id"
          size="medium"
          resizable
          auto-resize
          :scroll-y="{ enabled: false }"
          :data="tableData"
          :header-cell-class-name="headerStyle"
          :row-class-name="rowClass"
          highlight-hover-row>
          <vxe-column type="seq" title="序号" width="60" align="center" fixed="left"></vxe-column>
          <vxe-column field="userName" title="姓名" align="center" :min-width="minWidth" fixed="left"></vxe-column>
          <vxe-column field="level_1" title="“好”票数" align="center" :min-width="minWidth" sortable></vxe-column>
          <vxe-column field="level_2" title="“较好”票数" align="center" :min-width="minWidth" sortable></vxe-column>
          <vxe-column field="level_3" title="“一般”票数" align="center" :min-width="minWidth" sortable></vxe-column>
          <vxe-column field="level_4" title="“较差”票数" align="center" :min-width="minWidth" sortable></vxe-column>
          <vxe-column field="level_no" title="弃权票数" align="center" :min-width="minWidth" sortable></vxe-column>
          <vxe-column field="level_sum" title="总票数（实投/应投）" align="center" :min-width="minWidth + 30">
            <template #default="{ row }">
              <span>{{ row.level_ed }} / {{ row.level_sum }}</span>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </template>
    <Empty
      v-else
      style="height: auto"
      :img-style="{
        width: '50%',
        height: '40%',
        marginTop: '-4%',
        objectFit: 'scale-down',
      }">
      <slot>暂无数据</slot>
    </Empty>
  </div>
</template>

<script>
import {
  listAssessmentResult,
  listAssessmentResultOrgan,
  downAssessmentData,
  downAssessmentDataOrg,
} from '@apis/mzEvaluation.js'
import { getNoCivilNeedAssessByOrgId } from '@apis/grade.js'
export default {
  name: 'EvaluationResData',
  props: {
    pageType: String,
    searchParams: Object,
  },
  data() {
    return {
      tableData: [],
      id: this.$route.query.id || '',
      detailsItem: {},
      typeOptions: [{ name: '非领导成员', id: 2 }],
      typeOptions1: [],
      type: 2,
      userInfo: JSON.parse(localStorage.PSKH_USERINFO),
    }
  },
  computed: {
    minWidth() {
      return this.pageType === 'sum' ? 130 : 80
    },
  },
  watch: {
    searchParams: {
      handler(newVal, oldVal) {
        if (this.pageType === 'sum') {
          this.type = 2
          this.getNoCivilNeedAssessByOrgId('1', newVal.id)
          this.initdata1()
        }
      },
    },
    '$route.query': {
      handler(obj) {
        if (obj && obj.id) {
          this.id = obj.id
          this.getNoCivilNeedAssessByOrgId('0', this.userInfo.loginPostInfo.orgId)
          this.initdata()
        }
      },
      deep: true,
    },
  },
  created() {
    // this.type = this.pageType === 'sum' ? 1 : 2
    if (!this.pageType) {
      this.getNoCivilNeedAssessByOrgId('0', this.userInfo.loginPostInfo.orgId)
      this.initdata()
    }
  },
  methods: {
    /* 部门数据查询 */
    initdata() {
      listAssessmentResult({ assessmentId: this.id, type: this.type }).then(res => {
        const data = res.data
        this.tableData = data.resultVOS ? data.resultVOS : []
        this.detailsItem = { ...data }
      })
    },
    /* 组织部数据查询 */
    initdata1() {
      if (!this.searchParams.orgName) return
      listAssessmentResultOrgan({
        assessmentId: this.id,
        orgId: this.searchParams.id,
        title: this.searchParams.title,
        // type: this.type,
        type: 2,
        tenantId: this.searchParams.tenantId,
      }).then(res => {
        const data = res.data
        this.tableData = data.resultVOS ? data.resultVOS : []
        this.detailsItem = { ...data }
      })
    },
    /* 导出 */
    onExport() {
      const req = `?assessmentId=${this.id}&type=2`
      const link = document.createElement('a')
      link.href = downAssessmentData(req)
      link.target = 'targetName'
      link.click()
    },
    /* 导出 */
    onExport1() {
      const req = `?orgId=${this.searchParams.id}&tenantId=${this.searchParams.tenantId}&title=${encodeURIComponent(
        this.searchParams.title
      )}&type=2`
      const link = document.createElement('a')
      link.href = downAssessmentDataOrg(req)
      console.log('link.href :>> ', link.href)
      link.target = 'targetName'
      link.click()
    },
    /* 监听角色切换 */
    onTypeChange() {
      this.initdata()
    },
    /* 监听角色切换 */
    onTypeChange1() {
      this.initdata1()
    },
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
    getNoCivilNeedAssessByOrgId(type, orgId) {
      getNoCivilNeedAssessByOrgId({ oneParam: orgId }).then(res => {
        if (res.status === 200) {
          this.typeOptions = [{ name: '非领导成员', id: 2 }]
          // if (res.data.length > 0) {
          //   if (type === '0') {
          //     this.typeOptions = [
          //       { name: '非领导成员', id: 2 },
          //       { name: '非公务员成员', id: 5 },
          //     ]
          //   } else {
          //     this.typeOptions1 = [
          //       { name: '领导成员', id: 1 },
          //       { name: '非领导成员', id: 2 },
          //       { name: '非公务员成员', id: 5 },
          //     ]
          //   }
          // } else {
          //   if (type === '0') {
          //     this.typeOptions = [{ name: '非领导成员', id: 2 }]
          //   } else {
          //     this.typeOptions1 = [
          //       { name: '领导成员', id: 1 },
          //       { name: '非领导成员', id: 2 },
          //     ]
          //   }
          // }
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.section_con1 {
  height: 100%;
  background-color: #fff;
  font-size: 14px;
  &.mini_section_con1 {
    height: calc(100% - 20px);
    padding: 0 25px;
    .down_body {
      height: calc(100% - 180px);
    }
  }
  &.mini_section_con3 {
    height: calc(100% - 70px);
  }

  .down_header {
    text-align: center;
    margin-bottom: 20px;
    .title {
      font-weight: 600;
      font-size: 22px;
      color: #333;
      margin-bottom: 15px;
    }
    .sub_title {
      color: #666;
      font-size: 16px;
      margin-bottom: 10px;
    }
    .sub_title1 {
      color: #666;
      position: relative;
      .el-button {
        position: absolute;
        right: 0;
        top: -5px;
      }
    }
    .search_line {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      /deep/.el-radio-group {
        padding: 8px 0 6px;
        .el-radio {
          margin-right: 20px;
        }
      }
    }
  }
  .down_body {
    height: calc(100% - 140px);
  }
}
/deep/.headerStyle {
  color: #333;
  border-left: 1px solid #eee;

  th,
  div,
  span,
  p {
    font-size: 14px;
  }
}

/deep/.rowClass {
  td,
  div,
  span,
  p {
    font-size: 14px;
  }
}
/deep/.empty .img {
  margin-top: 0;
}
</style>
